<template>
  <div class="nav">
    <a class="nav-item" href="#/homePage" @click="changeMenu(1)" :class="{'menu-chose':menuNum===1}">首页</a>
    <a class="nav-item" href="#/gift" @click="changeMenu(2)" :class="{'menu-chose':menuNum===2}">礼品中心</a>
    <a class="nav-item" href="#/vip" @click="changeMenu(3)" :class="{'menu-chose':menuNum===3}">VIP专享</a>
    <a class="nav-item" href="#/personal" @click="changeMenu(4)" :class="{'menu-chose':menuNum===4}">个人中心</a>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        menuNum: 1
      }
    },
    methods: {
      changeMenu (num) {
        this.menuNum = num
        console.log(this.menuNum)
      }
    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "Menu.styl";
</style>

